<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #CCC;
        }

        .banner {
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 200px;
            overflow: hidden;
            border-radius: 10px;
        }

        .banner ul {
            position: absolute;
            width: 2000px;
            /* transition: all 1s ease-in-out; */
        }

        .banner ul li {
            float: left;
            list-style: none;
        }

        .banner ul li a {
            display: block;
            width: 400px;
            height: 200px;
        }

        .banner ul li a img {
            width: 100%;
            height: 100%;
        }

        .arrow {
            position: absolute;
            top: 170px;
            left: 50%;
            transform: translateX(-50%);
            width: 520px;
            height: 60px;
            /* background-color: pink; */

        }

        .arr_left {
            float: left;
            width: 60px;
            height: 60px;
            /* background-color: #fff;  */
        }

        .arr_right {
            float: right;
            width: 60px;
            height: 60px;
            /* background-color: #fff; */
        }

        .arrow img {
            width: 100%;
            height: 100%;
            opacity: .3;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul id="oul">
            <li><a href="#"><img src="./images/b1.png" alt=""></a></li>
            <li><a href="#"><img src="./images/b4.png" alt=""></a></li>
            <li><a href="#"><img src="./images/b2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/b3.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="arrow">
        <div class="arr_left"><img src="./images/左箭头.png" alt=""></div>
        <div class="arr_right"><img src="./images/右箭头.png" alt=""></div>
    </div>
    <script>
        var banner = document.getElementsByClassName('banner')[0];
        var arr_left = document.getElementsByClassName('arr_left')[0];
        var arr_right = document.getElementsByClassName('arr_right')[0];
        var oul = banner.firstElementChild;
        var r_speed = 400;
        var l_speed = -400;
        // var oli = oul.firstElementChild;
        // oul.appendChild(oli);
        // console.log(oli);
        var timer1 = setInterval(() => {
            if (oul.offsetLeft == -1200) {
                oul.style.left = 0;
            }
            else {
                oul.style.left = oul.offsetLeft - 400 + 'px';
            }
            // console.log(oul.offsetLeft);
        }, 2000);
        // var timer2;
        arr_left.onclick = function () {
            // clearInterval(timer1);
            // clearInterval(timer2);
            // clearInterval(timer3);
            // timer2 = setInterval(() => {
            if (oul.offsetLeft == 0) {
                oul.style.left = -1200 + 'px';
            }
            else {
                oul.style.left = oul.offsetLeft + 400 + 'px';
            }
            // }, 2000);
        }
        // var timer3;
        arr_right.onclick = function () {
            // clearInterval(timer1);
            // clearInterval(timer3);
            // clearInterval(timer2);
            // timer3 = setInterval(() => {
            if (oul.offsetLeft == -1200) {
                oul.style.left = 0;
            }
            else {
                oul.style.left = oul.offsetLeft - 400 + 'px';
            }
            // }, 2000);
        }
    </script>
</body>

</html>